<template>
    <div class="container">
        <Loading></Loading>
        <div class="top">
            <row>
                <router-link to="/home" style="float:left;font-size:24px;color:#fff;padding-left:50px; padding-top:10px">
                    蚕桑填报系统
                </router-link>
                <div class="layout-shrink" style="float:left;padding-top:5px;">
                    <i-button type="text" @click="toggleClick">
                        <Icon type="navicon" size="32" color="#FFFFFF"></Icon>
                    </i-button>
                </div>
                <div class="top_right">
                    <Dropdown trigger="click">
                        <a href="javascript:void(0)">
                            <span class="top_User">
                                当前用户：{{user.UserName}}
                                <Icon type="arrow-down-b"></Icon>
                            </span>
                        </a>
                        <Dropdown-menu slot="list">
                            <Dropdown-item>
                                <router-link to="/userinfo">
                                    <Icon type="person-stalker" size="18"></Icon>&nbsp;&nbsp;
                                    <span class="layout-nav-span">个人信息修改</span>
                                </router-link>
                            </Dropdown-item>
                            <Dropdown-item>
                                <a href="javascirpt:;" @click="showPwdModal()">
                                    <Icon type="edit" size="18"></Icon>&nbsp;&nbsp;
                                    <span class="layout-nav-span">修改密码</span>
                                </a>
                            </Dropdown-item>
                            <Dropdown-item>
                                <a class="exit" @click="loginOut">
                                    <Icon type="power" size="18"></Icon>&nbsp;&nbsp;
                                    <span class="layout-nav-span">安全退出</span>
                                </a>
                            </Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                </div>
            </row>
        </div>
        <div class="layout">
            <Row type="flex" style="height:100% !important;">
                <i-col :span="spanLeft" class="layout-menu-left">
                    <Menu theme="dark" width="auto" :open-names="['1']" accordion :class="{'layout-hide-text': spanLeft < 4}">
                        <Submenu v-for="item in MenuList" :name="item.Id" :key="item.Id">
                            <template slot="title">
                                <Icon :type="item.icon" :size="iconSize" color="#FFFFFF"></Icon>
                                <span class="layout-text">{{item.title}}</span>
                            </template>
                            <router-link v-if="sitem.children.length==0" v-for="sitem in item.children" :to="sitem.url" :key="sitem.Id">
                                <Menu-item :name="sitem.Id">
                                    <Icon :type="sitem.icon" :size="siconSize"></Icon>
                                    <span>{{sitem.title}}</span>
                                </Menu-item>
                            </router-link>
                            <Menu-group v-if="sitem.children.length!=0" v-for="sitem in item.children" :title="sitem.title" :key="sitem.Id">
                                <router-link v-for="ssitem in sitem.children" :to="ssitem.url" :key="ssitem.Id">
                                    <Menu-item :name="ssitem.Id">
                                        <Icon :type="ssitem.icon"></Icon>{{ssitem.title}}
                                    </Menu-item>
                                </router-link>
                            </Menu-group>
                        </Submenu>
                    </Menu>
                </i-col>
                <i-col :span="spanRight" class="layout-content-icol">
                    <div style="position: fixed;top:60px; z-index:998;background:#EEEFEF;width:98%;margin-left:10px;">
                        <label style="float:left;margin:5px;font-size:14px;">
                            <Icon type="ios-location-outline" size="20"></Icon>&nbsp;&nbsp;当前位置:</label>
                        <div class="layout-breadcrumb">
                            <Breadcrumb>
                                <Breadcrumb-item href="/home">
                                    <Icon type="ios-home-outline" size="20"></Icon> 首页
                                </Breadcrumb-item>
                                <Breadcrumb-item :href="item.RouterUrl" v-for="item in BreadcrumbItem" :key="item.RouterUrl">
                                    <Icon :type="item.RouterIcon" :size="item.RouterIconSize"></Icon> {{item.RouterName}}
                                </Breadcrumb-item>
                            </Breadcrumb>
                        </div>
                    </div>
                    <div class="layout-content">
                        <router-view></router-view>
                    </div>
                </i-col>
            </Row>
            <div class="layout-copy">
                <p>2011-2017 &copy; 云南省农业技术推广总站&nbsp;&nbsp;&nbsp;&nbsp;云南瀚哲科技有限公司提供技术支持</p>
            </div>
        </div>
        <Modal v-model="showType" :mask-closable="false" :closable="false">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">密码修改</span>
            </p>
            <div slot="footer">
                <Button type="primary" @click="save('dataModel')">修改</Button>
                <Button type="ghost" @click="cancel('dataModel')" style="margin-left: 8px">取消</Button>
            </div>
            <Form ref="dataModel" :model="dataModel" :rules="ruleValidate" :label-width="80">
                <Form-item label="原始密码" prop="OriginalPwd">
                    <Input type="password" v-model="dataModel.OriginalPwd" placeholder="请输入原始密码"></Input>
                </Form-item>
                <Form-item label="新密码" prop="Password">
                    <Input type="password" v-model="dataModel.Password" placeholder="请输入新密码"></Input>
                </Form-item>
                <Form-item label="确认密码" prop="ConfirmPwd">
                    <Input type="password" v-model="dataModel.ConfirmPwd" placeholder="请输入确认密码"></Input>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>
<script>
// import vuex from 'vuex';
// const router = new VueRouter(RouterConfig);
export default {
    name: 'home',
    data: function () {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.dataModel.ConfirmPwd !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.dataModel.validateField('ConfirmPwd');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.dataModel.Password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            userInfo: this.GetlocaStorage("CSuserinfo"),
            MenuList: [],//菜单列表
            spanLeft: 4,//左侧占据的栅格数
            spanRight: 20,//右侧占据的栅格数
            BreadcrumbItem: [],
            showType: false,
            ruleValidate: {
                OriginalPwd: [{ required: true, message: '原始密码不能为空!', trigger: 'blur' }],
                Password: [{ required: true, validator: validatePass, trigger: 'blur' }],
                ConfirmPwd: [{ required: true, validator: validatePassCheck, trigger: 'blur' }],
            },
            dataModel: {
                OriginalPwd: '',
                Password: '',
                ConfirmPwd: '',
                UserId: ''
            },
            baseData: [{
                expand: true,
                title: 'parent 1',
                children: [{
                    title: 'parent 1-0',
                    expand: true,
                    disabled: false,
                    children: [{
                        title: 'leaf',
                        disableCheckbox: false
                    }, {
                        title: 'leaf',
                    }]
                }, {
                    title: 'parent 1-1',
                    expand: true,
                    checked: false,
                    children: [{
                        title: '<span style="color: red">leaf</span>',
                    }]
                }]
            }]
        }
    },
    methods: {
        showPwdModal() {
            this.dataModel.UserId = this.userInfo.UserId;
            this.showType = true;
        },
        initMenu() {
            var user = this.GetlocaStorage("CSuserinfo");
            var userModel = new Object();
            var self = this;
            this.$http.get('Menu', { params: { UserId: user.UserId, Account: user.Account } }).then(function (res) {

                switch (res.data.status) {
                    case 0:
                        self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                        break;
                    case 1:
                        self.MenuList = res.data.model;
                        break;
                    case -1:
                        self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                        break;
                }
            });
        },
        getBreadcrumb() {//获取面包屑          
            this.BreadcrumbItem = this.$store.state.BreadcrumbItem;
        },
        toggleClick() {//菜单关闭和展开
            if (this.spanLeft === 4) {
                this.spanLeft = 2;
                this.spanRight = 22;
            } else {
                this.spanLeft = 4;
                this.spanRight = 20;
            }
        },
        loginOut() {
            var self = this;
            this.$Modal.confirm({
                title: '提示信息',
                content: '<p>确定退出登录吗？</p>',
                onOk: () => {
                    self.$http.get('Account').then(function (res) {
                        if (res.data.status == 1) {
                            self.SetlocaStorage("CSuserinfo", null);//清空缓存数据
                            self.SetlocaStorage("arealist", null);//清空缓存数据
                            self.SetlocaStorage("dictlist", null);//清空缓存数据
                            self.$router.push('/login');//跳转到登录页面   
                        }
                        else {
                            self.$Modal.error({ title: '提示信息', content: res.data.message });
                        }
                    });
                },
                onCancel: () => {
                    self.$Modal.remove();
                }
            });
        },
        //检查用户信息是否完整
        checkUserInfo(){
            var self = this;
            var user = this.GetlocaStorage("CSuserinfo");
            this.$http.get('User', { params: { AreaCode: user.AreaCode, Account: user.Account } }).then(function (res) {
                if(res.data.model.Phone==null||res.data.model.Phone==" "){
                    self.$Modal.info({ title: "提示信息", content: "电话信息不完整！！！请点击右上角进行修改！！！", desc: false });
                }else if(res.data.model.Email==null||res.data.model.Email==" "){
                    self.$Modal.info({ title: "提示信息", content: "邮件信息不完整！！！请点击右上角进行修改！！！", desc: false });
                }else if(res.data.model.UnitName==null||res.data.model.UnitName==" "){
                    self.$Modal.info({ title: "提示信息", content: "工作单位信息不完整！！！请点击右上角进行修改！！！", desc: false });
                }else if(res.data.model.UnitAddress==null||res.data.model.UnitAddress==" "){
                    self.$Modal.info({ title: "提示信息", content: "单位地址信息不完整！！！请点击右上角进行修改！！！", desc: false });
                }
            });
        },
        //保存方法
        save(modelname) {
            var self = this;
            this.$refs[modelname].validate((valid) => {
                if (valid) {
                    this.$http.post('User/PostPassword', this.dataModel).then(
                        function (res) {
                            switch (res.data.status) {
                                case 0:
                                    self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                                    self.showType = false;
                                    break;
                                case 1:
                                    self.$Modal.success({ title: "提示信息", content: res.data.message, desc: false });
                                    self.showType = false;
                                    break;
                                case -1:
                                    self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                                    break;
                            }
                        });
                }
            });
        },
        //取消方法
        cancel(modelname) {
            this.$refs[modelname].resetFields();//重置model
            this.showType = false;//关闭modal
        },
        checkLogin: function () {//登录检测
            var userInfo = this.GetlocaStorage("CSuserinfo");
            if (userInfo == null || userInfo == undefined) {
                //如果没有登录状态则跳转到登录页
                this.$router.push('/login');
            } else {
                //否则跳转到登录后的页面
                this.$router.push('/home');
            }
        }
    },
    computed: {
        user() {//当前用户获取
            return this.GetlocaStorage("CSuserinfo");

        },
        iconSize() {
            return this.spanLeft === 4 ? 18 : 24;
        },
        siconSize() {
            return this.spanLeft === 4 ? 14 : 24;
        }
    },
    created() {//系统初始化，首先进行登录验证
        this.checkLogin();
        this.getBreadcrumb();
        this.initMenu();
        this.checkUserInfo();
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        "$route": "getBreadcrumb"
    }
}
</script>
<style scoped src="../styles/main.css"></style>
